<template>
    <div class="jpbox">
        <div class="dialogBody common" :style="{ height: '730px' }" style="overflow: hidden;">
            <div class="baseTitle">基本信息</div>
            <div style="height:140px;">
                <publicForm ref="publicForm" lableWidth="155px" :formObj="formObj" :formData="formData">
                </publicForm>
            </div>
            <div class="baseTitle">级配设置</div>
            <div v-if="formData.sieveList.length != 0" style="height:480px;" class="fillableBox">
                <tableData :config="table_sieve" :currentRow="false" :dataList="formData.sieveList"
                    :loading="listsieveLoading" placeholderText="" @inputValue="inputValue" statusType="1" />
            </div>
        </div>
        <div class="newlyAdded_btn" v-if="btnShow">
            <el-button type="primary" @click="yj_saveForm('publicForm')">保存</el-button>
            <!-- <el-button type="warning" @click="close">关闭</el-button> -->
            <el-button type="warning" @click="dialogEditVisible = false">关闭</el-button>
        </div>
    </div>
</template>
  
<script>

import publicForm from "@/components/public/el-form.vue"//弹框form
import formJs from './regexDetail.js'//新增弹框配置项
import TableData from '@/components/pitchManage/dyMonitorManage/el-tables';//主页面列表

import {
    saveAsphaltRecipe,//沥青拌合站 基础设置 配方管理-配方保存接口

    getAsphaltRecipeDetail,// 沥青拌合站 基础设置  查询-配方管理详情页

} from "@/api/request.js";

export default {
    props: ['commonData'],
    data() {
        return {
            allData: null,
            table_sieve: formJs.sieveAperture,//级配设置
            formData: {
                // fId: "",// 配方fid
                // fStandard: "",// 执行标准
                // fRecipenumber: "",// 配合比编号
                // fAsphaltaggregateratiogoalvalue: "",// 油石比（必填）
                // fPitchnum: "",// 沥青标号/改性沥青品种
                // fJptype: "",// 级配类型
                // fMixturetype: "",// 混合料类型
                // fStartdates: "",// 启用时间
                // fCompanyid: "",
                userId: "",
                userName: "",
                fCompanyid: "",
                fCompanyname: "",
                fId: "",
                fRecipenumber: "",//配方编号
                fRecipename: "",//配方名称
                fMixturetype: "",//混合料类型
                fPitchnum: "",//沥青标号
                fSurfacecourse: "",//施工部位
                fStartdates: "",//启用时间
                fStatus: "",//配方附件
                fRecipedescription: "",//描述
                fAsphaltaggregateratiogoalvalue: "",//油石比目标值
                fAsphaltaggregateratioupper: "",//油石比上限
                fAsphaltaggregaeratiolower: "",//油石比下限
                fTemperatureupper: "",//温度上限
                fTemperaturelower: "",//温度下限
                sieveList: []
            },
            formObj: formJs.formObj,
            fId: null,
            listsieveLoading: false,//级配设置








            dialogTitle: '编辑',
            btnShow: true,//保存按钮是否显示

        };
    },
    watch: {
        commonData: {
            handler(newVal) {
                if (newVal) {
                    this.allData = newVal
                    this.yj_editForm(newVal)

                    //     this.commonData = {
                    //     status: status,
                    //     companyId: this.getList.fCompanyid,
                    //     data: row
                    // }

                }
            },
            immediate: true
        },


    },
    components: {

        publicForm,//弹框表格

        TableData

    },


    mounted() {
        var that = this

        setTimeout(() => {
            that.type_config = formJs.type_config
        }, 800)
    },

    destroyed() {

    },
    methods: {


        yj_editForm(data) {
            var status = data.status
            // this.$emit('operationLoading', true)
            // this.$emit('operationdialog', true)


            if (status == 0) {//新增
                this.$emit('operationLoading', false)

                this.formData = {//新增
                    fId: "",// 配方fid
                    fStandard: "",// 执行标准
                    fRecipenumber: "",// 配合比编号
                    fAsphaltaggregateratiogoalvalue: "",// 油石比（必填）
                    fPitchnum: "",// 沥青标号/改性沥青品种
                    fJptype: "",// 级配类型
                    fMixturetype: "",// 混合料类型
                    fCompanyid: data.fCompanyid,
                    fStartdates: this.common.getDay(0) + " " + "23:59:59",// 启用时间
                    sieveList: []
                }
                getAsphaltRecipeDetail({ fId: "" }).then(res => {
                    if (res.errcode == 0) {
                        this.formData.sieveList = res.data.asphaltRecipe.sieveList

                        console.log(this.formData.sieveList);
                    } else {
                        this.$message.error("获取详情接口报错", res.msg);
                    }
                })


                // this.sieveApertureData = formJs.sieveApertureData
                this.formObj.map(item => {
                    item.disabled = false
                    item.rules[0].required = true
                })
                this.dialogEditVisible = true;
                this.btnShow = true//新增时按钮显示
                // this.loadingEditDialog = true
            } else if (status == 1) {//编辑
                if (data.row.fId != null && data.row.fId != '') {


                    this.$emit('operationLoading', false)
                    this.btnShow = true//编辑时按钮显示
                    this.formObj.map(item => {
                        item.disabled = false
                        item.rules[0].required = true
                    })
                    this.yj_viewForm()
                } else {
                    return this.$message.error("请先选择需要查看的数据");

                }
            } else if (status == 2) {//
                if (data.row.fId != null && data.row.fId != '') {

                    this.$emit('operationLoading', false)

                    this.btnShow = false//编辑时按钮显示
                    this.formObj.map(item => {
                        item.disabled = true
                        item.rules[0].required = false
                    })
                    this.yj_viewForm()
                } else {
                    return this.$message.error("请先选择需要查看的数据");

                }
            }
        },
        yj_viewForm() {
            var row = this.rowInfo



            if (row != null) {
                var id = row.fId;
                this.fId = row.fId;
                this.dialogEditVisible = true;
                this.loadingEditDialog = true
                // this.commonData = {
                //     fId: id,
                //     companyId: this.getList.fCompanyid,
                //     machineId: row.fMachineid
                // }

                getAsphaltRecipeDetail({ fId: id }).then(res => {
                    if (res.errcode == 0) {
                        this.loadingEditDialog = false
                        this.formData = res.data.asphaltRecipe

                        console.log(res.data);
                    } else {
                        this.$message.error("获取详情接口报错", res.msg);
                    }
                })
            } else {
                return this.$message.error("请先选择需要查看的数据");
            }
        },

        inputValue(val, table) {
            this.formData.sieveList = table
            console.log(val);
        },
        getData(data) {


            this.btnShow = true//显示保存按钮，当查看时隐藏
            var row = data.row
            console.log(row);
            if (row != null) {
                var id = row.fId;
                this.fId = row.fId;
                // this.dialogEditVisible = true;
                // this.loadingEditDialog = true
                getAsphaltRecipeDetail({ fId: id }).then(res => {
                    if (res.errcode == 0) {
                        // this.loadingEditDialog = false
                        this.formData = res.data.asphaltRecipe


                    } else {
                        this.$message.error("获取详情接口报错", res.msg);
                    }
                })
            } else {
                return this.$message.error("请先选择需要查看的数据");
            }

            this.$emit('dialogTitle', '编辑')


        },


        yj_saveForm() {

            if (this.$refs.publicForm.submitForm()) {
                saveAsphaltRecipe(this.formData).then(res => {
                    if (res.errcode == 0) {
                        this.yj_searchForm(this.getList)
                        this.dialogEditVisible = false;

                        // this.$emit('searchForm')
                        // this.$emit('dialogShow', false)
                        this.$message.success("新增成功");
                    } else {
                        this.$message.error('新增失败', res.msg);
                        console.log("接口报错");
                    }
                })
                console.log('闭合申请单', this.formData);
            } else {
                console.log("error")
            }


            // this.handleData.fCompanyid = this.allData.companyId// 施工标段id
            // if (this.checkStatus == 0) {//闭合申请单
            //     if (this.$refs.publicForm0.submitForm()) {
            //         this.saveForm(this.handleData)
            //         console.log('闭合申请单', this.handleData);
            //     } else {
            //         console.log("error")
            //     }
            // } else if (this.checkStatus == 1) {
            //     if (this.$refs.publicForm1.submitForm()) {
            //         console.log('一级审核', this.handleData);
            //         this.saveForm(this.handleData)

            //     } else {
            //         console.log("error")
            //     }
            // } else if (this.checkStatus == 2) {
            //     if (this.$refs.publicForm2.submitForm()) {
            //         console.log('二级审核', this.handleData);
            //         this.saveForm(this.handleData)

            //     } else {
            //         console.log("error")
            //     }
            // }




        },

        close() {
            this.$emit('dialogShow', false)

        },

    },
};
</script>
<style lang="less" scope>
.jpbox {
    height: 100%;
}

.dialogBody {
    padding: 3px 20px;
    height: 80%;
    // overflow-y: auto;
    display: flex;
    flex-direction: column;

    .jpbox {
        height: 100%;
    }

    .dialogBody {
        position: relative;
    }

    .tab {
        display: flex;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        border-bottom: 2px solid #E4E7ED;
        padding: 0 0.16rem;


        .btn {
            margin-top: 4px;
            margin-right: 16px;
            width: 102px;
            height: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-top-right-radius: 4px;
            border-top-left-radius: 4px;

        }
    }

    .charts {
        // height: calc(100% - 30px);
        height: 620px;

    }

}

.baseTitle {
    /* border: 1px solid #0c204d; */
    border-bottom: 1px solid #0c204d;

    height: 30px;
    line-height: 30px;
    position: relative;
    padding-left: 15px;

}

.baseTitle::after {
    display: block;
    content: "";
    height: 30px;
    width: 5px;
    position: absolute;
    left: 0;
    top: 0;
    background: #0c204d;
}

.materialClass /deep/.el-table tr:nth-child(4) {
    display: none;
}

.jipeiBoxs {
    display: flex;
    flex: 1;

    .left {
        width: 60%;
        margin-right: 15px;
        display: flex;
        flex-direction: column;

        .errorMonitoring {
            flex: 1;
        }
    }

    .right {
        width: 40%;

        display: flex;
        flex-direction: column;

        .errorMonitoring {
            flex: 1;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;


            .tableWaring {
                width: 90%;
                height: 85%;
                margin: 15px;
                box-sizing: border-box;

                display: flex;
                flex-direction: column;
                align-content: space-around;
                border: 1px solid #EBEEF5;
                border-bottom: none;

                .line {
                    flex: 1;
                    display: flex;
                    line-height: 20px;
                    // height: 25px;
                    // line-height: 25px;
                    border-bottom: 1px solid #EBEEF5;

                    .tableName {
                        width: 40%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-right: 1px solid #EBEEF5;
                    }

                    .tableData {
                        width: 55%;
                        padding-left: 8px;
                    }
                }

                .line:nth-child(2n) {
                    background: #dbe7f5;
                    color: #4f6375;
                }


            }
        }
    }
}


.mixProportion /deep/ .el-form-item__content {
    margin-left: 180px !important;
}

.fillableBox /deep/ .el-table .cell {
    padding: 0 !important;
}

.fillableBox /deep/ .el-input__inner {
    border: none;
    height: 31px !important;
    padding: 0 !important;
    text-align: center;
}
</style>
